<!--风控审核详情-->
<template>
  <div class="risk-detail-app-container">
    <div class="save-busi-btn">
      <el-button class="filter-item right-btn" type="primary" icon="el-icon-download" @click="$router.go(-1)">
        返回</el-button>
      <el-button class="filter-item right-btn" type="primary" icon="el-icon-download" @click="save()">
        修改</el-button>
      <el-button class="filter-item right-btn" type="primary" icon="el-icon-download" @click="authDialog()">
        审核</el-button>
      <el-button class="filter-item right-btn" type="primary" icon="el-icon-download" @click="suspend() ">
        暂停</el-button>
      <el-button class="filter-item right-btn" type="primary" icon="el-icon-download" @click="reject()">
        驳回</el-button>

    </div>
    <el-form
      ref="mainForm"
      :model="formData"
      :rules="rules"
      size="mini"
      class="editForm"
      label-width="120px"
    >
      <!--贷款信息-->
      <!--      <el-divider content-position="left" class="part-title">贷款信息</el-divider>-->
      <div class="part-box">
        <el-row>
          <el-col :span="6">
            <el-form-item label="业务编号" required class="car-form-item">
              <el-input v-model="orders.orderId" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="查征银行" required class="car-form-item">
              <el-select v-model="mainUser.checkBank" disabled placeholder="请选择" clearable class="car-modal-col">
                <el-option
                  v-for="item in banks"
                  :key="item.id"
                  :label="item.bankName"
                  :value="item.id+''"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="合作车商" required class="car-form-item">
              <el-select v-model="approveInfo.carCooperate" disabled placeholder="请选择" clearable class="filter-item">
                <el-option v-for="item in carCooperates" :key="item.id" :label="item.name" :value="item.id+''" />
              </el-select>
            </el-form-item>
            <el-form-item label="有线设备" class="car-form-item">
              <el-input v-model="formData.wiredGps" class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="电审日期" required class="car-form-item">
              <el-date-picker v-model="formData.telAuditDate" value-format="yyyy-MM-dd HH:mm:ss" type="date" class="car-modal-col" placeholder="选择日期"/>
            </el-form-item>
            <el-form-item label="风险承担比例" class="car-form-item">
              <el-input v-model="formData.riskRatio" class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户姓名" required class="car-form-item">
              <el-input v-model="mainUser.customerName" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="业务部门" required class="car-form-item">
              <el-input v-model="orders.serviceGroup" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="业务风险等级" required class="car-form-item">
             <el-select
               v-model="formData.riskLevel"
               placeholder="请选择"
               clearable
               class="car-modal-col">
               <el-option
                 v-for="item in riskLevels"
                 :key="item.key"
                 :label="item.label"
                 :value="item.key"/>
             </el-select>
            </el-form-item>
            <el-form-item label="无线设备" class="car-form-item">
              <el-input v-model="formData.wirelesGps" class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="购车类型" prop="nickName" class="car-form-item">
             <el-select
               v-model="approveInfo.buyType"
               placeholder="请选择"
               clearable
               disabled
               class="car-modal-col">
               <el-option
                 v-for="item in buyTypes"
                 :key="item.key"
                 :label="item.label"
                 :value="item.key"/>
             </el-select>
            </el-form-item>
            <el-form-item label="是否代购" prop="nickName" class="car-form-item">
              <el-select
                v-model="approveInfo.daigou"
                placeholder="请选择"
                disabled
                clearable
                class="car-modal-col" >
                <el-option
                  v-for="item in daigous"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户手机号" required class="car-form-item">
              <el-input v-model="mainUser.phoneNum" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="业务员" required class="car-form-item">
              <el-input v-model="orders.serviceUser" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="贷款金额" required class="car-form-item">
              <el-input v-model="approveInfo.loanAmount" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="贷款申请审核日期" required class="car-form-item">
              <el-date-picker v-model="approveInfo.loanApplyDate" disabled value-format="yyyy-MM-dd HH:mm:ss" type="date" class="car-modal-col" placeholder="选择日期"/>
            </el-form-item>
            <el-form-item label="留备用钥匙" prop="nickName" class="car-form-item">
             <el-select v-model="formData.existKey" placeholder="请选择" clearable class="car-modal-col">
               <el-option
                 v-for="item in existKeys"
                 :key="item.key"
                 :label="item.label"
                 :value="item.key+''"
               />
             </el-select>
            </el-form-item>
            <el-form-item label="支付服务方式" required class="car-form-item">
              <el-select v-model="formData.payType" placeholder="请选择" clearable class="car-modal-col">
                <el-option
                  v-for="item in payTypes"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件号码" required class="car-form-item">
              <el-input v-model="mainUser.certNum" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="业务手机号" prop="nickName" class="car-form-item">
              <el-input v-model="mainUser.backPhoneNum" disabled class="car-modal-col" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="面签结果" prop="nickName" class="car-form-item">
              <el-select placeholder="Type" class="car-modal-col">
                <el-option :value="'item.key'" />
              </el-select>
            </el-form-item>

            <el-form-item label="电审结果" required class="car-form-item">
             <el-select v-model="formData.telAuditResult" placeholder="请选择" clearable class="car-modal-col">
               <el-option
                 v-for="item in telAuditResults"
                 :key="item.key"
                 :label="item.label"
                 :value="item.key"
               />
             </el-select>
             </el-form-item>
            <el-form-item label="基础保证金比例" required class="car-form-item">
              <el-input v-model="formData.basicMarginRatio" class="car-modal-col" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="电话审核内容" required class="car-form-item">
              <el-input v-model="telAuditContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="历史电审信息" prop="nickName" class="car-form-item">
              <el-input v-model="formData.telAuditContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="" prop="nickName" class="car-form-item">
              <ve-table
                :columns="columns"
                :table-data="tableData"
                :border-x="true"
                :border-y="true"
                :row-style-option="rowStyleOption"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <!--    审核弹框-->
    <el-dialog class="lnk-dialog" :close-on-click-modal="false" title="审批" top="10vh" width="50%" :visible.sync="approvalDialog" :append-to-body="true">
      <el-form ref="mainForm" :model="rejectForm" size="mini" class="editForm" label-width="80px">
        <!--表单项-->
        <el-row>
          <el-col :span="12">
            <el-form-item label="贷款金额"  class="car-form-item">
              <el-input v-model="authRisk.quota" disabled placeholder="请输入" />
            </el-form-item>
            <el-form-item label="审批人"  class="car-form-item">
              <el-input v-model="authApproveSet.userName" disabled placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批等级"  class="car-form-item">
              <el-select
                v-model="authRisk.curApproveLevel"
                placeholder="请选择"
                clearable
                disabled
                class="car-modal-col">
                <el-option
                  v-for="item in riskLevels"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"/>
              </el-select>
            </el-form-item>
            <el-form-item label="审批人等级"  class="car-form-item">
             <el-select
               v-model="authApproveSet.approveLevel"
               placeholder="请选择"
               clearable
               disabled
               class="car-modal-col">
               <el-option
                 v-for="item in riskLevels"
                 :key="item.key"
                 :label="item.label"
                 :value="item.key"/>
             </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审批结果"  class="car-form-item">
             <el-select
               v-model="authForm.approveResult"
               placeholder="请选择"
               clearable
               class="car-modal-col">
               <el-option
                 v-for="item in telAuditResults"
                 :key="item.key"
                 :label="item.label"
                 :value="item.key"/>
             </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审批备注" class="car-form-item">
              <el-input v-model="authForm.approveConten" type="textarea" :autosize="{ minRows: 1, maxRows: 2}" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <ve-table
              :columns="authColumns"
              :table-data="authTableData"
              :border-x="true"
              :border-y="true"
              :row-style-option="rowStyleOption"
            />
          </el-col>
        </el-row>
        <el-row />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approvalDialog = false">取消</el-button>
        <el-button type="primary" @click="authSave()">保存</el-button>
      </div>
    </el-dialog>
<!--    驳回弹框-->
    <el-dialog class="lnk-dialog" :close-on-click-modal="false" title="驳回" top="10vh" width="50%" :visible.sync="rejectDialog" :append-to-body="true">
      <el-form ref="mainForm" :model="rejectForm" size="mini" class="editForm" label-width="80px">
        <!--表单项-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="驳回原因" prop="驳回原因" class="car-form-item">
              <el-input v-model="formData.nickName" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="rejectDialog = false">取消</el-button>
        <el-button type="primary" @click="rejectSave()">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog class="lnk-dialog" :close-on-click-modal="false" title="驳回" top="10vh" width="50%" :visible.sync="suspendDialog" :append-to-body="true">
      <el-form ref="mainForm" size="mini" class="editForm" label-width="80px">
        <!--表单项-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="暂停原因" prop="暂停原因" class="car-form-item">
              <el-input v-model="formData.nickName" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="suspendDialog = false">取消</el-button>
        <el-button type="primary" @click="suspendSave()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import commonService from '@/utils/common-date'

const DB_DATA = []
export default {
  data() {
    return {
      buyTypes: [],
      tableData:[],
      authTableData:[],
      id:"",
      appId:"",
      approvalDialog: false,  // 审批
      rejectDialog: false,
      suspendDialog: false,
      rejectForm:'', // 驳回
      newDialog: false,
      formData: {},
      telAuditContent:'',
      existKeys: [{ key: 0,label:'否' },{ key: 1,label:'是' }],
      telAuditResults: [{ key: 0,label:'未通过' },{ key: 1,label:'通过' }],
      daigous: [{ key: true, label: '是' }, { key: false, label: '否' }],
      riskLevels: [{ key: 'first', label: '一级' }, { key: 'second', label: '二级' }, { key: 'third', label: '三级' }, { key: 'forth', label: '四级' }, { key: 'fifth', label: '五级' }],
      payTypes: [{ key: 'cash', label: '现金' }, { key: 'forward', label: '转账' }, { key: 'alipay', label: '支付宝' }, { key: 'wechat', label: '微信' }],
      carTypes: [{ value: 0, label: '新车' }, { value: 1, label: '二手车' }], // 车辆类型
      banks: [], // 银行
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      rowStyleOption: { // 表格样式
        stripe: true, // 斑马纹
        hoverHighlight: true, // hover高亮
        clickHighlight: true // 点击行高亮
      },
      // page index
      pageIndex: 1,
      // page size
      pageSize: 10,
      rules: {},
      authRisk:{},
      authApproveSet:{},
      authForm:{},
      mainUser:{},
      approveInfo:{},
      orders:{},
      carCooperates: [],
      checkboxOptipon: {
        // 行选择改变事件
        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
          console.log(row, isSelected, selectedRowKeys)
        },
        // 全选改变事件
        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
          console.log(isSelected, selectedRowKeys)
        }
      },
      columns: [
        {
          field: '',
          key: 'a',
          title: '编号',
          align: 'center',
          renderBodyCell: ({ row, column, rowIndex }, h) => {
            return (this.pageIndex - 1) * this.pageSize + rowIndex + 1
          }
        },
        { field: 'opUser', key: 'b', title: '提交人', align: 'center' },
        { field: 'opInfo', key: 'c', title: '提交信息', align: 'left' },
        { field: 'opTime', key: 'd', title: '提交日期', align: 'left' },
        { field: 'approveNode', key: 'e', title: '审核节点', width: '' }
      ],
      authColumns: [
        {
          field: 'approveLevel',
          key: 'a',
          title: '',
          align: 'center'
        },
        { field: 'name', key: 'b', title: '审批人', align: 'center' },
        { field: 'approveResult', key: 'c', title: '审批结果', align: 'left' },
        { field: 'approveContent', key: 'd', title: '审批说明', align: 'left' }
      ]
    }
  },
  computed: {
  },
  created() {
     this.appId = sessionStorage.getItem('appId');
    if (this.$route.query && this.$route.query.source === 'riskList') {
      this.id = this.$route.query.id;
      this.sourceFrom = this.$route.query.source
      this.initDatabase(this.$route.query.id);
      this.getBankList();
      this.getCarCooperates();
    }
  },
  methods: {
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    async save(){
      let params ={};
      params.orderId = this.id;
      this.formData.quota = this.approveInfo.loanAmount;
      this.formData.telAuditContent = this.formData.telAuditContent + " " + this.telAuditContent;
      params.risk = this.formData;

      const data = await this.$http.post('/flow/risk/save', params);
      if (data.code === 200) {
        this.$message({
          type: 'success',
          message: '保存成功！'
        })
        this.initDatabase(this.id);
      }

    },
    async authSave(){
      let params = {};
      params.orderId = this.id;
      this.authForm.riskId = this.authRisk.id;
      this.authForm.quota = this.authRisk.quota;
      this.authForm.approveLevel = this.authRisk.curApproveLevel;

      params.detail = this.authForm;

      const data = await this.$http.post('/flow/risk/auth', params)
      if (data.code === 200) {
          this.$message({
            type: 'success',
            message: '审批完成!'
          })
          this.approvalDialog = false;
          $nav.back();
      }

    },
    async authDialog(){
        if(this.formData.id){
          this.approvalDialog = true;

          const data = await this.$http.get('/flow/risk/getAuthUser/'+this.formData.id+'/'+this.appId+'/' + this.formData.curApproveLevel, '')
          if (data.code === 200) {
            this.authRisk = data.data.risk;
            this.authApproveSet = data.data.approveSet;
            this.authTableData = data.data.approveDetail;
            console.log(this.auth);
          }
        } else {

          this.$message({
            type: 'error',
            message: '请先保存风控信息'
          })
        }

    },

    async reject(){
      this.rejectDialog = true;
    },
    async suspend(){
     this.suspendDialog = true;

    },

    async rejectSave(){
      const data = await this.$http.get('/flow/orders/reject/' + this.id, '')
      if (data.code === 200) {
        this.rejectDialog = false;
        this.$message({
          type: 'success',
          message: '驳回成功！'
        })
      }
    },
    async suspendSave(){
      const data = await this.$http.get('/flow/orders/suspend/' + this.id, '')
      if (data.code === 200) {
        this.suspendDialog = false;
        this.$message({
          type: 'success',
          message: '暂停成功！'
        })
      } else {
        this.suspendDialog = false;
        this.$message({
          type: 'error',
          message: data.msg
        })
      }
    },
    /**
     * 获取征信单详情
     * @date 2021/7/6
     */
    async initDatabase(id) {
      // this.banks = await commonService.getBankAll()
      const data = await this.$http.get('/flow/risk/detail/' + id, {})
      if (data.code === 200) {
        this.orders = data.data.orders
        this.mainUser = data.data.mainUser
        if(data.data.risk) {
          this.formData = data.data.risk;
        }
        if(data.data.approveInfo) {
          this.approveInfo = data.data.approveInfo;
        }

        this.tableData = data.data.serviceOp;
      }
    },
    /**
       * 获取银行列表数据
       * @date 2021-05-18
       */
    async getBankList() {
      const param = { appId: await sessionStorage.getItem('appId') }
      const data = await this.$http.post('/auth/bankSetup/listAll/', param)
      if (data.code === 200) {
        this.banks = data.data
      }
    },
/**
       * 获取经销商列表数据
       * @date 2021-05-18
       */
    async getCarCooperates() {
      const param = { appId: await sessionStorage.getItem('appId') }
      const data = await this.$http.post('/auth/distributor/listAll', param)
      if (data.code === 200) {
        this.carCooperates = data.data
      }
    },
  }
}
</script>
<style lang="scss" scoped>

.risk-detail-app-container {
  width: 98%;
  margin: 0 auto 0;
  .save-busi-btn{
    margin-top: 10px;
    overflow: hidden;
  }
  .btn-box {
    width: 100%;
    text-align: right;
    margin: 10px auto;
  }
  .part-title {
    margin: 0 0 0;
    font-size: 18px;
    font-weight: bold;
    .el-divider__text{
      font-size: inherit;
    }
  }
  .right-btn{
    float: right;
    margin: 0 0 10px 10px;
  }
  .part-box {
    padding: 20px 15px 0 0;
    //border-left: 1px solid #d3d6dd;
    //border-right: 1px solid #d3d6dd;
    //border-bottom: 1px solid #d3d6dd;
    .car-modal-col {
      width: 200px;
    }
    .upload-box {
      margin-left: 10px;
      margin-bottom: 10px;
    }
  }
  .part-title-box{
    height: 35px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 20px auto;
    text-align: center;
    .part-tip{
      font-size: 14px;
      text-align: center;
      line-height: 35px;

    }
  }
}
.bottom-file{
  .title{
    font-size: 14px;
    margin: 20px 0;
    padding: 0 5px;
    font-weight: bold;
    border-left: 4px solid #2D7AEC;
    color: #333333;
  }
  .file-item-box{
    width: 100%;
    display: flex;
    flex-direction: row;
    .file-item{
      width: 120px;
      text-align: center;
      >img{
        width: 40px;
        height: 40px;
      }
      .file-name{
        font-size: 14px;
        color: #333333;
        line-height: 30px;
      }
    }
  }
}
.dialog-app-container {
  width: 100%;
  margin: -60px auto 0;
}
</style>
